<template>
	<view class="box">
		<view class="top">
			<view>
				<u-text :text="current === '1' ? (noteTitle || '') : (name || '')" size="44rpx" color="#3D3D3D"
					margin="0 0 24rpx" />
			</view>
			<view class="flex_wrap row_between row_middle">
				<u-text :text="'最近更新: ' + $u.timeFormat(createTime, 'yy-mm-dd hh:MM')" size="32rpx" color="#AAA" />
				<u-icon name="edit-pen" color="#588BF3" size="22" @click="edit()"></u-icon>
			</view>
			<u-gap height="24rpx" />
			<view>
				<!-- <u-text :text="info || ''" size="32rpx" color="#3D3D3D" margin="0 0 48rpx" /> -->
				<text class="my_text" space="ensp">{{ info || '' }}</text>
				<u-gap height="48rpx" />
			</view>
			<view class="img" v-for="(e, i) in fileListNew" :key="i">
				<video class="img_video" v-if="e.substring(e.length - 3, e.length) == 'mp4'" :src="e"></video>
				<image class="img_img" v-if="e.substring(e.length - 3, e.length) == 'png' || e.substring(e.length - 3, e.length) == 'jpg'" :src="e" mode="widthFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig";
	export default {
		data() {
			return {
				info: "",
				name: '',
				nameId: '',
				current: '0',
				details: {},
				title: '',
				noteTitle: '',
				fileList1: [],
				createTime: '',
				fileListNew: {}
			};
		},
		onReady() {},
		onLoad(options) {
			this.current = options.current
			this.details = options?.data && JSON.parse(options?.data);
			this.fileListNew = this.details.pictureUrl.split(',')
			this.info = this.details.info;
			this.nameId = this.details.customerId
			this.name = this.details.customerName
			this.noteTitle = this.details.title
			this.createTime = this.details.updateTime
			if (this.nameId) {
				this.name = this.details.customerName || '微信用户'
			}
		},
		methods: {
			edit() {
				const data = JSON.stringify(this.details);
				this.$u.route({
					url: "/pages_balance/laptop/add/index",
					params: {
						current: this.current,
						type: '编辑',
						data,
						backType:'详情'
					},
				});
			},
		}
	};
</script>

<style>
	page {
		background-color: #F1F5F8;
	}
</style>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;

		.top {
			display: flex;
			flex-direction: column;
			margin-top: 18rpx;
			padding: 32rpx;
			background-color: #fff;
		}

		.bottom {
			background: #fff;
			padding: 30rpx 40rpx;
		}

		.img {
			&_img {
				width: 100%;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
			}

			&_video {
				width: 100%;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
			}

		}
		.my_text {
			word-break: break-word; //可以避免文字超出限制
		}
	}
</style>